<template>
  <el-card class="mt-10">
    <el-form>
      <el-form-item label="属性名">
        <el-input
          placeholder="请输入属性名"
          style="width: 200px"
          v-model="cartgroyStroe.attrValue"
        />
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      :icon="Plus"
      :disabled="!cartgroyStroe.attrValue"
      @click="addAttrValue"
    >
      添加属性值
    </el-button>
    <el-button @click="cancelAddAttr">取消</el-button>
    <el-table :data="cartgroyStroe.attrAgree" border class="mt-20">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="属性值名称">
        <template v-slot="{ row, $index }">
          <el-input
            v-model="row.valueName"
            @input="setDisabled(row.valueName)"
            ref="inputRef"
            size="small"
            @blur="clearblur(row, $index)"
            v-if="row.isEidt"
          ></el-input>
          <div v-else @click="showEidt(row)">{{ row.valueName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-popconfirm
            :title="`确定删除${row.valueName}吗?`"
            @confirm="deleteAttr($index)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" :disabled="isbtnDisabled" @click="addAttrList">
      保存
    </el-button>
    <el-button @click="cancelAddAttr">取消</el-button>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AddOrUpdateAttr",
};
</script>

<script lang="ts" setup>
import { useCartgroyStroe } from "@/stores/cartgroy";
import { ref, nextTick, reactive, computed } from "vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import type { AttrValueItem, AttrItem } from "@/api/product/model/attrModel";

const cartgroyStroe = useCartgroyStroe();

const emit = defineEmits(["gobackAttrList"]);
const disabled = ref(true);

// input实例
const inputRef = ref();

// 添加属性值
const addAttrValue = () => {
  cartgroyStroe.attrAgree.push({
    valueName: "",
    isEidt: true,
  });
  nextTick(() => {
    inputRef.value.focus();
  });
};

const clearblur = (row: AttrValueItem, index: number) => {
  if (!row.valueName) {
    cartgroyStroe.attrAgree.splice(index, 1);
  }
  row.isEidt = false;
};

// 切换编辑模式
const showEidt = (row: AttrValueItem) => {
  row.isEidt = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};
// 点击取消按钮
const cancelAddAttr = () => {
  cartgroyStroe.attrValue = "";
  cartgroyStroe.attrAgree = [];
  emit("gobackAttrList", true);
};

// 删除点击的属性值那一列
const deleteAttr = (index: number) => {
  cartgroyStroe.attrAgree.splice(index, 1);
};

// 控制保存按钮禁用
const setDisabled = (valueName: string) => {
  if (!valueName) {
    disabled.value = true;
    return;
  }
  disabled.value = false;
};

const baseAttrInfo = reactive<AttrItem>({
  attrName: cartgroyStroe.attrValue,
  attrValueList: cartgroyStroe.attrAgree,
  categoryId: cartgroyStroe.cartgroy3Id,
  categoryLevel: 3,
  id: undefined,
});
// 点击保存按钮发送请求
const addAttrList = () => {
  //修改
  if (cartgroyStroe.id) {
    baseAttrInfo.id = cartgroyStroe.id;
    cartgroyStroe.getAddAttrList(baseAttrInfo);
  } else {
    // 新增
    cartgroyStroe.getAddAttrList(baseAttrInfo);
  }
  cartgroyStroe.attrValue = "";
  cartgroyStroe.attrAgree = [];
  emit("gobackAttrList", true);
};

const isbtnDisabled = computed(() => {
  return !cartgroyStroe.attrAgree[0]?.valueName || !cartgroyStroe.attrValue;
});
</script>

<style scoped>
.mt-20 {
  margin-bottom: 20px;
}
</style>
